<template>
    <div class="conenter">
        <h4>鼠标位置</h4>
        <div>X:{{ x }}</div>
        <div>Y:{{ y }}</div>
        
    </div>
    <hr>
    <div> {{ count }} <button @click="Countbtn">点击加加</button></div>
    
</template>
<script>
import { reactive , onMounted, onUnmounted, ref, toRefs } from 'vue';

export default {

    setup() {
        //定义变量
        const mouse = reactive({
            x: 0,
            y: 0
        })
        //跟随鼠标移动改变的x，y
        const move = e => { 
            mouse.x = e.pageX;
            mouse.y = e.pageY
        }
        //生命钩子
        onMounted(() => { 
            //监听鼠标移动
            document.addEventListener('mousemove',move)
        })
        onUnmounted(() => { 
            document.removeEventListener('mousemove',move)
        })

        //数据的加加
        //ref定义的响应式 赋值的是皇后需要 使用 .value 来赋值
        //reactive 赋值的时候直接就是对象名.属性名  主要用来解决复杂业务逻辑
        const count = ref(0)
        const Countbtn = () => { 
            count.value++
        }



        return {
            Countbtn,
            ...toRefs(mouse),
            count
        }
    }
}

</script>

<style scoped></style>
